<template>
	<view class="container">
		<!-- 左侧分类列表 -->
		<scroll-view 
			scroll-y 
			class="category-scroll"
			:scroll-top="categoryScrollTop"
			:scroll-with-animation="true"
			:show-scrollbar="false"
		>
			<view class="category-list">
				<view 
					class="category-item" 
					v-for="(item, index) in categoryList" 
					:key="index"
					:class="{'active': currentCategory === item.id}"
					:id="'category-' + item.id"
					@click="switchCategory(item.id)"
				>
					<text>{{item.name}}</text>
				</view>
			</view>
		</scroll-view>
		
		<!-- 右侧商品列表 -->
		<scroll-view 
			scroll-y 
			class="product-scroll"
			@scrolltolower="loadMore"
			@scroll="onProductScroll"
			:scroll-into-view="'product-category-' + currentCategory"
			:scroll-with-animation="true"
			refresher-enabled
			:refresher-triggered="isRefreshing"
			@refresherrefresh="onRefresh"
			:show-scrollbar="false"
		>
			<!-- 筛选栏 -->
			<view class="filter-bar">
				<view class="filter-item" @click="selectPriceFilter">
					<text>价格</text>
					<text class="arrow" :class="{'asc': priceFilter === 'asc', 'desc': priceFilter === 'desc'}"></text>
				</view>
				<view class="filter-item" @click="selectSalesFilter">
					<text>销量</text>
					<text class="arrow" :class="{'asc': salesFilter === 'asc', 'desc': salesFilter === 'desc'}"></text>
				</view>
			</view>
			
			<!-- 商品列表（按分类分组） -->
			<block v-for="(category, categoryIndex) in categoryList" :key="category.id">
				<view 
					class="category-section" 
					:id="'product-category-' + category.id"
				>
					<view class="category-title">{{category.name}}</view>
					<view class="product-list">
						<view 
							class="product-item" 
							v-for="(item, index) in getProductsByCategory(category.id)" 
							:key="index"
							@click="navigateToDetail(item.id)"
						>
							<image :src="item.image" mode="aspectFill" class="product-image"></image>
							<view class="product-info">
								<text class="name">{{item.name}}</text>
								<text class="price">¥{{item.price}}</text>
								<view class="rating">
									<text class="score">{{item.rating}}</text>
									<text class="sales">已售{{item.sales}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</block>
			
			<!-- 加载更多 -->
			<view class="loading-more" v-if="hasMore">
				<text>加载中...</text>
			</view>
			<view class="no-more" v-else>
				<text>没有更多了</text>
			</view>
			
			<!-- 空状态 -->
			<view class="empty-state" v-if="productList.length === 0">
				<image src="/static/images/empty.png" mode="aspectFit" class="empty-img"></image>
				<text class="empty-text">暂无商品</text>
			</view>
		</scroll-view>
		
		<!-- 价格筛选弹窗 -->
		<uni-popup ref="pricePopup" type="bottom">
			<view class="filter-popup">
				<view class="popup-header">
					<text>价格排序</text>
					<text class="close" @click="closePriceFilter">✕</text>
				</view>
				<view class="popup-content">
					<view 
						class="filter-option" 
						:class="{'active': priceFilter === 'default'}"
						@click="selectPriceFilter('default')"
					>
						<text>默认排序</text>
					</view>
					<view 
						class="filter-option" 
						:class="{'active': priceFilter === 'asc'}"
						@click="selectPriceFilter('asc')"
					>
						<text>从低到高</text>
					</view>
					<view 
						class="filter-option" 
						:class="{'active': priceFilter === 'desc'}"
						@click="selectPriceFilter('desc')"
					>
						<text>从高到低</text>
					</view>
				</view>
			</view>
		</uni-popup>
		
		<!-- 销量筛选弹窗 -->
		<uni-popup ref="salesPopup" type="bottom">
			<view class="filter-popup">
				<view class="popup-header">
					<text>销量排序</text>
					<text class="close" @click="closeSalesFilter">✕</text>
				</view>
				<view class="popup-content">
					<view 
						class="filter-option" 
						:class="{'active': salesFilter === 'default'}"
						@click="selectSalesFilter('default')"
					>
						<text>默认排序</text>
					</view>
					<view 
						class="filter-option" 
						:class="{'active': salesFilter === 'asc'}"
						@click="selectSalesFilter('asc')"
					>
						<text>从低到高</text>
					</view>
					<view 
						class="filter-option" 
						:class="{'active': salesFilter === 'desc'}"
						@click="selectSalesFilter('desc')"
					>
						<text>从高到低</text>
					</view>
				</view>
			</view>
		</uni-popup>
		
		<!-- 评分筛选弹窗 -->
		<uni-popup ref="ratingPopup" type="bottom">
			<view class="filter-popup">
				<view class="popup-header">
					<text>评分排序</text>
					<text class="close" @click="closeRatingFilter">✕</text>
				</view>
				<view class="popup-content">
					<view 
						class="filter-option" 
						:class="{'active': ratingFilter === 'default'}"
						@click="selectRatingFilter('default')"
					>
						<text>默认排序</text>
					</view>
					<view 
						class="filter-option" 
						:class="{'active': ratingFilter === 'asc'}"
						@click="selectRatingFilter('asc')"
					>
						<text>从低到高</text>
					</view>
					<view 
						class="filter-option" 
						:class="{'active': ratingFilter === 'desc'}"
						@click="selectRatingFilter('desc')"
					>
						<text>从高到低</text>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
import { ref, computed } from 'vue'

// 分类列表滚动位置
const categoryScrollTop = ref(0)

// 当前选中的分类
const currentCategory = ref(1)

// 分类列表
const categoryList = ref([
	{ id: 1, name: '火锅底料' },
	{ id: 2, name: '肉类' },
	{ id: 3, name: '海鲜' },
	{ id: 4, name: '蔬菜' },
	{ id: 5, name: '豆制品' },
	{ id: 6, name: '主食' },
	{ id: 7, name: '饮品' },
	{ id: 8, name: '调料' },
	{ id: 9, name: '餐具' },
	{ id: 10, name: '礼盒' }
])

// 筛选条件
const priceFilter = ref('default')
const salesFilter = ref('default')
const ratingFilter = ref('default')

// 是否还有更多数据
const hasMore = ref(true)

// 是否正在刷新
const isRefreshing = ref(false)

// 商品列表
const productList = ref([
	{
		id: 1,
		categoryId: 1,
		name: '川味红油火锅底料',
		price: '39.90',
		image: '/static/images/products/huoguo1.jpg',
		rating: '4.8',
		sales: '1000+'
	},
	{
		id: 2,
		categoryId: 1,
		name: '清汤火锅底料',
		price: '35.90',
		image: '/static/images/products/huoguo2.jpg',
		rating: '4.7',
		sales: '800+'
	},
	{
		id: 3,
		categoryId: 1,
		name: '菌汤火锅底料',
		price: '42.90',
		image: '/static/images/products/huoguo3.jpg',
		rating: '4.9',
		sales: '600+'
	},
	{
		id: 4,
		categoryId: 2,
		name: '精选肥牛片',
		price: '68.00',
		image: '/static/images/products/meat1.jpg',
		rating: '4.9',
		sales: '2000+'
	},
	{
		id: 5,
		categoryId: 2,
		name: '澳洲雪花牛肉',
		price: '128.00',
		image: '/static/images/products/meat2.jpg',
		rating: '4.8',
		sales: '500+'
	},
	{
		id: 6,
		categoryId: 2,
		name: '精品毛肚',
		price: '88.00',
		image: '/static/images/products/meat3.jpg',
		rating: '4.7',
		sales: '1500+'
	},
	{
		id: 7,
		categoryId: 3,
		name: '鲜活大虾',
		price: '98.00',
		image: '/static/images/products/seafood1.jpg',
		rating: '4.8',
		sales: '300+'
	},
	{
		id: 8,
		categoryId: 3,
		name: '深海鱼片',
		price: '78.00',
		image: '/static/images/products/seafood2.jpg',
		rating: '4.6',
		sales: '400+'
	},
	{
		id: 9,
		categoryId: 4,
		name: '有机生菜',
		price: '12.90',
		image: '/static/images/products/veg1.jpg',
		rating: '4.7',
		sales: '2000+'
	},
	{
		id: 10,
		categoryId: 4,
		name: '金针菇',
		price: '15.90',
		image: '/static/images/products/veg2.jpg',
		rating: '4.8',
		sales: '1800+'
	},
	{
		id: 11,
		categoryId: 5,
		name: '嫩豆腐',
		price: '8.90',
		image: '/static/images/products/bean1.jpg',
		rating: '4.6',
		sales: '1200+'
	},
	{
		id: 12,
		categoryId: 5,
		name: '千叶豆腐',
		price: '12.90',
		image: '/static/images/products/bean2.jpg',
		rating: '4.7',
		sales: '900+'
	},
	{
		id: 13,
		categoryId: 6,
		name: '手工面条',
		price: '16.90',
		image: '/static/images/products/staple1.jpg',
		rating: '4.8',
		sales: '1500+'
	},
	{
		id: 14,
		categoryId: 6,
		name: '红薯粉',
		price: '12.90',
		image: '/static/images/products/staple2.jpg',
		rating: '4.7',
		sales: '1300+'
	},
	{
		id: 15,
		categoryId: 7,
		name: '椰子汁',
		price: '9.90',
		image: '/static/images/products/drink1.jpg',
		rating: '4.8',
		sales: '800+'
	},
	{
		id: 16,
		categoryId: 7,
		name: '酸梅汤',
		price: '12.90',
		image: '/static/images/products/drink2.jpg',
		rating: '4.9',
		sales: '600+'
	},
	{
		id: 17,
		categoryId: 8,
		name: '蒜蓉酱',
		price: '15.90',
		image: '/static/images/products/sauce1.jpg',
		rating: '4.8',
		sales: '1000+'
	},
	{
		id: 18,
		categoryId: 8,
		name: '花生酱',
		price: '12.90',
		image: '/static/images/products/sauce2.jpg',
		rating: '4.7',
		sales: '800+'
	},
	{
		id: 19,
		categoryId: 9,
		name: '304不锈钢筷子',
		price: '29.90',
		image: '/static/images/products/tableware1.jpg',
		rating: '4.9',
		sales: '500+'
	},
	{
		id: 20,
		categoryId: 9,
		name: '加厚火锅勺',
		price: '19.90',
		image: '/static/images/products/tableware2.jpg',
		rating: '4.8',
		sales: '400+'
	},
	{
		id: 21,
		categoryId: 10,
		name: '火锅大礼包',
		price: '199.00',
		image: '/static/images/products/gift1.jpg',
		rating: '4.9',
		sales: '300+'
	},
	{
		id: 22,
		categoryId: 10,
		name: '调味料礼盒',
		price: '168.00',
		image: '/static/images/products/gift2.jpg',
		rating: '4.8',
		sales: '200+'
	}
])

// 排序后的商品列表
const sortedProductList = computed(() => {
	let sorted = [...productList.value]
	
	// 价格排序
	if (priceFilter.value !== 'default') {
		sorted.sort((a, b) => {
			const priceA = parseFloat(a.price)
			const priceB = parseFloat(b.price)
			return priceFilter.value === 'asc' ? priceA - priceB : priceB - priceA
		})
	}
	
	// 销量排序
	if (salesFilter.value !== 'default') {
		sorted.sort((a, b) => {
			const salesA = parseInt(a.sales.replace('+', ''))
			const salesB = parseInt(b.sales.replace('+', ''))
			return salesFilter.value === 'asc' ? salesA - salesB : salesB - salesA
		})
	}
	
	return sorted
})

// 根据分类获取商品
const getProductsByCategory = (categoryId) => {
	return sortedProductList.value.filter(item => item.categoryId === categoryId)
}

// 切换分类
const switchCategory = (id) => {
	currentCategory.value = id
	// 计算分类列表滚动位置
	const index = categoryList.value.findIndex(item => item.id === id)
	if (index > -1) {
		categoryScrollTop.value = Math.max(0, index * 80 - 160)
	}
}

// 监听商品列表滚动
const onProductScroll = (e) => {
	const scrollTop = e.detail.scrollTop
	// 根据滚动位置计算当前分类
	const sections = uni.createSelectorQuery().selectAll('.category-section')
	sections.boundingClientRect((rects) => {
		if (!rects) return
		for (let i = 0; i < rects.length; i++) {
			const rect = rects[i]
			if (rect.top <= 100 && rect.bottom > 100) {
				const categoryId = parseInt(rect.id.split('-')[2])
				if (currentCategory.value !== categoryId) {
					currentCategory.value = categoryId
					// 更新左侧分类列表滚动位置
					const index = categoryList.value.findIndex(item => item.id === categoryId)
					if (index > -1) {
						categoryScrollTop.value = Math.max(0, index * 80 - 160)
					}
				}
				break
			}
		}
	}).exec()
}

// 模拟分页数据
const pageSize = 10
const currentPage = ref(1)
const totalPages = ref(3)

// 加载更多
const loadMore = () => {
	if (!hasMore.value) return
	
	// 模拟加载更多数据
	uni.showLoading({
		title: '加载中...'
	})
	
	setTimeout(() => {
		// 模拟新数据
		const newProducts = [
			{
				id: productList.value.length + 1,
				categoryId: Math.floor(Math.random() * 10) + 1,
				name: '新品' + (productList.value.length + 1),
				price: (Math.random() * 100 + 10).toFixed(2),
				image: '/static/images/products/default.jpg',
				rating: (Math.random() * 0.3 + 4.6).toFixed(1),
				sales: Math.floor(Math.random() * 1000) + '+'
			}
		]
		
		// 添加到列表
		productList.value.push(...newProducts)
		
		// 更新页码和加载状态
		currentPage.value++
		hasMore.value = currentPage.value < totalPages.value
		
		uni.hideLoading()
	}, 1000)
}

// 下拉刷新
const onRefresh = () => {
	isRefreshing.value = true
	
	// 重置状态
	currentPage.value = 1
	hasMore.value = true
	
	// 模拟刷新数据
	setTimeout(() => {
		// 随机更新一些商品的销量和评分
		productList.value = productList.value.map(item => ({
			...item,
			sales: Math.floor(Math.random() * 1000) + '+',
			rating: (Math.random() * 0.3 + 4.6).toFixed(1)
		}))
		
		isRefreshing.value = false
		
		uni.showToast({
			title: '刷新成功',
			icon: 'success'
		})
	}, 1000)
}

// 跳转到商品详情
const navigateToDetail = (id) => {
	uni.navigateTo({
		url: `/pages/product/detail?id=${id}`
	})
}

// 选择价格筛选
const selectPriceFilter = () => {
	if (priceFilter.value === 'default') {
		priceFilter.value = 'asc'
	} else if (priceFilter.value === 'asc') {
		priceFilter.value = 'desc'
	} else {
		priceFilter.value = 'default'
	}
	
	// 重置加载状态
	currentPage.value = 1
	hasMore.value = true
	
	// 显示排序提示
	uni.showToast({
		title: priceFilter.value === 'default' ? '默认排序' : 
			   priceFilter.value === 'asc' ? '价格从低到高' : '价格从高到低',
		icon: 'none'
	})
}

// 选择销量筛选
const selectSalesFilter = () => {
	if (salesFilter.value === 'default') {
		salesFilter.value = 'asc'
	} else if (salesFilter.value === 'asc') {
		salesFilter.value = 'desc'
	} else {
		salesFilter.value = 'default'
	}
	
	// 重置加载状态
	currentPage.value = 1
	hasMore.value = true
	
	// 显示排序提示
	uni.showToast({
		title: salesFilter.value === 'default' ? '默认排序' : 
			   salesFilter.value === 'asc' ? '销量从低到高' : '销量从高到低',
		icon: 'none'
	})
}

// 显示价格筛选弹窗
const showPriceFilter = () => {
	uni.$refs.pricePopup.open()
}

// 关闭价格筛选弹窗
const closePriceFilter = () => {
	uni.$refs.pricePopup.close()
}

// 显示销量筛选弹窗
const showSalesFilter = () => {
	uni.$refs.salesPopup.open()
}

// 关闭销量筛选弹窗
const closeSalesFilter = () => {
	uni.$refs.salesPopup.close()
}

// 显示评分筛选弹窗
const showRatingFilter = () => {
	uni.$refs.ratingPopup.open()
}

// 关闭评分筛选弹窗
const closeRatingFilter = () => {
	uni.$refs.ratingPopup.close()
}

// 选择评分筛选
const selectRatingFilter = (filter) => {
	ratingFilter.value = filter
	closeRatingFilter()
	// 重置列表并重新加载
	productList.value = []
	hasMore.value = true
	loadMore()
}
</script>

<style lang="scss">
.container {
	display: flex;
	min-height: 100vh;
	background-color: #F5F5F5;
}

/* 分类列表样式 */
.category-scroll {
	width: 160rpx;
	height: 100vh;
	background-color: #FFFFFF;
}

.category-list {
	padding: 20rpx 0;
}

.category-item {
	height: 80rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26rpx;
	color: #666;
	position: relative;
	transition: all 0.3s;
	
	&.active {
		color: #D02B29;
		font-weight: bold;
		background-color: #FFF0F0;
		
		&::before {
			content: '';
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			width: 4rpx;
			height: 32rpx;
			background-color: #D02B29;
			border-radius: 2rpx;
		}
	}
}

/* 商品列表样式 */
.product-scroll {
	flex: 1;
	height: 100vh;
}

/* 分类标题样式 */
.category-section {
	.category-title {
		padding: 20rpx 30rpx;
		font-size: 28rpx;
		color: #333;
		font-weight: bold;
		background-color: #FFFFFF;
		border-bottom: 1rpx solid #EEEEEE;
	}
}

/* 筛选栏样式 */
.filter-bar {
	display: flex;
	padding: 0 30rpx;
	height: 80rpx;
	background-color: #FFFFFF;
	border-bottom: 1rpx solid #EEEEEE;
	position: sticky;
	top: 0;
	z-index: 1;
	
	.filter-item {
		display: flex;
		align-items: center;
		margin-right: 40rpx;
		
		text {
			font-size: 28rpx;
			color: #333;
		}
		
		.arrow {
			position: relative;
			width: 24rpx;
			height: 24rpx;
			margin-left: 8rpx;
			
			&::before,
			&::after {
				content: '';
				position: absolute;
				left: 50%;
				width: 0;
				height: 0;
				border-left: 6rpx solid transparent;
				border-right: 6rpx solid transparent;
			}
			
			&::before {
				top: 4rpx;
				border-bottom: 6rpx solid #CCCCCC;
			}
			
			&::after {
				bottom: 4rpx;
				border-top: 6rpx solid #CCCCCC;
			}
			
			&.asc::before {
				border-bottom-color: #D02B29;
			}
			
			&.desc::after {
				border-top-color: #D02B29;
			}
		}
	}
}

/* 商品列表样式 */
.product-list {
	padding: 20rpx;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	
	.product-item {
		width: calc(50% - 10rpx);
		background-color: #FFFFFF;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
		overflow: hidden;
		
		.product-image {
			width: 100%;
			height: 320rpx;
			background-color: #F5F5F5;
		}
		
		.product-info {
			padding: 16rpx;
			
			.name {
				font-size: 26rpx;
				color: #333;
				font-weight: bold;
				line-height: 1.4;
				height: 72rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
			
			.price {
				font-size: 32rpx;
				color: #D02B29;
				font-weight: bold;
				margin: 12rpx 0;
				
				&::before {
					content: '¥';
					font-size: 24rpx;
					margin-right: 2rpx;
				}
			}
			
			.rating {
				display: flex;
				align-items: center;
				justify-content: space-between;
				
				.score {
					font-size: 22rpx;
					color: #FFB800;
					
					&::after {
						content: '分';
						margin-left: 2rpx;
					}
				}
				
				.sales {
					font-size: 22rpx;
					color: #999;
				}
			}
		}
	}
}

/* 加载更多样式 */
.loading-more, .no-more {
	text-align: center;
	padding: 20rpx;
	
	text {
		font-size: 24rpx;
		color: #999;
	}
}

/* 空状态样式 */
.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 100rpx 0;
	
	.empty-img {
		width: 200rpx;
		height: 200rpx;
		margin-bottom: 20rpx;
	}
	
	.empty-text {
		font-size: 28rpx;
		color: #999;
	}
}

/* 筛选弹窗样式 */
.filter-popup {
	background-color: #FFFFFF;
	border-radius: 20rpx 20rpx 0 0;
	padding: 30rpx;
	
	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
		
		text {
			font-size: 32rpx;
			color: #333;
			font-weight: bold;
		}
		
		.close {
			font-size: 40rpx;
			color: #999;
		}
	}
	
	.popup-content {
		.filter-option {
			padding: 30rpx 0;
			text-align: center;
			border-bottom: 1rpx solid #F5F5F5;
			
			&:last-child {
				border-bottom: none;
			}
			
			&.active {
				color: #D02B29;
				font-weight: bold;
			}
			
			text {
				font-size: 28rpx;
				color: #666;
			}
		}
	}
}
</style> 